<template>
  <div class="source-card-wrapper">
    <h2 class="title">{{ source.title }}</h2>

    <div class="source-base-info clearfix">
      <img :src="authorAvatarUrl" alt="avatar" />
      <div class="info">
        <h2>{{ source.authorName }}</h2>
        <h3>{{ formatPublishDate }} - {{ source.downloadTimes }}次下载</h3>
      </div>
    </div>

    <div class="source-main">
      <p class="source-intro">{{ source.digest }}</p>

      <div class="source-content">
        <div class="downloadImg" @click="downloadSource()">
          <img :src="fileIcon" alt="FILE" />
          <div class="hover"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getFileIcon } from '@/utils/img'
import { computed } from 'vue'
import { format } from '@/utils/time'
import config from '@/config'
import { post } from '@/utils/request'
import { open } from '@/utils/link'
import { show } from '@/utils/popup'

const props = defineProps<{
  source: App.Source
  author: App.Author
}>()

let fileIcon = computed(() => {
  return getFileIcon(props.source.name)
})

let formatPublishDate = computed(() => {
  return format(props.source.publishDate, 'yyyy-m-d')
})
let authorAvatarUrl = computed(() => {
  return props.author.avatar
    ? config.baseURL + props.author.avatar
    : config.baseURL + config.defaultAssetUrls.avatar
})

function downloadSource() {
  post('source/download', {
    id: props.source.id,
  })
    .then(() => {
      open(config.baseURL + props.source.file)
    })
    .catch(() => {
      show('下载出错了')
    })
}
</script>

<style lang="scss" scoped>
.source-card-wrapper {
  --w: var(--sourceCardWidth);
  --fs: calc(var(--w) / 25);
  padding: 0 var(--fs) calc(var(--fs) * 0.5);
  box-sizing: border-box;
  width: var(--w);
  background-color: white;
  min-height: 500px;
  border-radius: 2px;

  .title {
    font-size: var(--fs);
    color: var(--dark);
    font-weight: bold;
    line-height: 2;
    text-align: center;
  }

  .source-base-info {
    --a: calc(var(--w) * 0.05);
    padding-bottom: calc(var(--a) * 0.4);
    border-bottom: 1px solid var(--gray);

    img,
    .info {
      float: left;
    }

    img {
      width: var(--a);
      height: var(--a);
      border-radius: 50%;
      overflow: hidden;
    }

    .info {
      margin-left: calc(var(--a) * 0.3);

      h2 {
        line-height: calc(var(--a) * 0.6);
        font-size: calc(var(--a) * 0.4);
        color: var(--dark);
      }

      h3 {
        line-height: calc(var(--a) * 0.4);
        font-size: calc(var(--a) * 0.2);
        color: var(--darkGray);
      }
    }
  }

  .source-main {
    .source-intro {
      padding: calc(var(--fs) * 0.5) 0;
      font-size: calc(var(--fs) * 0.5);
      line-height: 2;
      white-space: pre-wrap;
    }

    .source-content {
      margin-bottom: var(--fs);
      width: 100%;
      --a: calc(var(--w) * 0.2);

      .downloadImg {
        box-sizing: border-box;
        width: calc(var(--a) * 1.2);
        height: calc(var(--a) * 1.2);
        padding: calc(var(--a) * 0.1);

        img {
          width: var(--a);
          height: var(--a);
        }

        &:hover {
          cursor: pointer;
        }

        &:hover .hover {
          display: block;
        }

        .hover {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 5%;
          background-color: var(--gray);
        }
      }
    }
  }
}
</style>
